<template>
	<div class="app-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px" class="margin_top_15">
					<el-form-item label="商品名称：">
						<el-input v-model.trim="queryParams.goodsName" placeholder="请输入商品名称" clearable size="small" />
					</el-form-item>
					<el-form-item label="专区名称：">
						<el-select v-model.trim="queryParams.zoneId" filterable clearable placeholder="请选择专区">
							<el-option v-for="(value, index) in zoneList" :key="index" :label="value.zoneName" :value="value.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间：">
						<el-date-picker v-model.trim="queryParams.date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<span class="search-btn" style="margin-right: 20px" @click="queryList">搜索</span>
					<!--          <span class="search-btn"  @click="handleAdd">新增</span>-->
				</el-form>
				<!--        <span class="search-btn"  ></span>-->
				<div style="">
					<el-button type="info" @click="goConsignment">寄售列表</el-button>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</div>
			</div>
			<el-table v-loading="loading" stripe :data="goodsList" class="table">
				<el-table-column :formatter="emptyToString" align="center" label="专区名称" prop="zone_name"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goods_id"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品名称" width="150px" prop="goods_name" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="goods-name-style">
							{{ scope.row.goodsName }}
						</div>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品图片">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]"></el-image>
					</template>
				</el-table-column>

				<el-table-column :formatter="emptyToString" align="center" label="寄售价格" width="120px" prop="originPrice"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="现金积分" width="120px" prop="originPrice"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="销量" width="120px" prop="originPrice"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="兑换量" width="120px" prop="originPrice"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="创建时间" prop="createTime" />
				<el-table-column :formatter="emptyToString" align="center" label="操作">
					<template slot-scope="scope">
						<el-button v-hasPermi="['mall:goods:edit']" type="info" class="minibtn_padding" @click="handleUpdate(scope.row.killGoodsId)">详情 </el-button>
						<el-button type="primary" class="minibtn_padding" @click="handleEdit(scope.row.killGoodsId)">编辑 </el-button>
						<el-button type="danger" class="minibtn_padding" @click="handleDel(scope.row.killGoodsId)">删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</el-card>

		<el-dialog title="新增" :visible.sync="showAdd" width="1290px" center :before-close="handleClose">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="专区选择：">
					<el-select v-model.trim="zoneId" filterable clearable placeholder="请选择专区" :disabled="selectListNow.length > 0">
						<el-option v-for="(value, index) in zoneList" :key="index" :label="value.zoneName" :value="value.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :disabled="!zoneId" class="select-btn" @click="selectShow">选择商品</el-button>
				</el-form-item>
				<div>
					<el-form-item label="批量编辑现金积分：" style="margin-left: 30px">
						<div class="block" style="display: flex">
							<el-input v-model.trim.number="price" placeholder="请输入现金积分" clearable> </el-input>
							<el-button type="primary" class="pl-edit-btn" style="width: 75px" :disabled="price == ''" @click="batchEditPrice">批量编辑</el-button>
						</div>
					</el-form-item>
				</div>
				<el-table stripe :data="selectListNow" class="table" height="550">
					<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" prop="goodsId"> </el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId"> </el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品名称" width="150px" prop="goods_name" show-overflow-tooltip>
						<template slot-scope="scope">
							<div class="goods-name-style">
								{{ scope.row.goodsName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品图片">
						<template slot-scope="scope">
							<el-image style="width: 50px; height: 50px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]"></el-image>
						</template>
					</el-table-column>

					<el-table-column :formatter="emptyToString" align="center" label="价格" prop="price"> </el-table-column>
					<el-table-column :formatter="emptyToString" prop="name" label="现金积分" align="center">
						<template slot-scope="scope">
							<el-input v-model.trim.number="scope.row.killPrice" placeholder="现金积分"></el-input>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" prop="name" label="显示顺序" align="center">
						<template slot-scope="scope">
							<el-input v-model.trim.number="scope.row.sort" placeholder="显示顺序"></el-input>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" class="commit-btn" @click="goodsCommit">保 存</el-button>
			</span>
			<el-dialog :title="zoneName" :visible.sync="addGoodsFlag" width="915px" append-to-body :before-close="handleClose2">
				<el-form :model="goodsForm" inline class="demo-form-inline">
					<el-row>
						<el-col :span="10">
							<el-form-item label="商品名称：">
								<el-input v-model.trim="goodsForm.goodsName" placeholder="请选择商品名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-button type="primary" icon="el-icon-search" @click="queryGoodsList">搜索</el-button>
						</el-col>
					</el-row>
				</el-form>
				<el-table
					ref="selectTable"
					stripe
					:data="goodsZoneList"
					class="table"
					:row-key="
						(row) => {
							return row.id;
						}
					"
					style="width: 100%"
					@selection-change="selectGoodsChange"
				>
					<el-table-column :formatter="emptyToString" type="selection" width="55" :reserve-selection="true"> </el-table-column>
					<el-table-column :formatter="emptyToString" prop="goodsName" label="商品名称" align="center"></el-table-column>
					<!--          <el-table-column :formatter="emptyToString" prop="address" label="供应商名称" align="center"></el-table-column>-->
					<el-table-column :formatter="emptyToString" prop="picUrl" label="图片" align="center">
						<template slot-scope="scope">
							<el-image style="width: 80px; height: 80px" :src="scope.row.picture"> </el-image>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" prop="price" label="价格" align="center"></el-table-column>
				</el-table>
				<pagination :total="goodsTotal" :page.sync="goodsForm.pageNum" :limit.sync="goodsForm.pageSize" @pagination="getGoodsList" />
				<div class="bottom-btn-box">
					<div>
						已选择 <span>{{ selectList.length }}</span
						>件商品
					</div>
					<el-button class="btn" @click="handleClose2">取消</el-button>
					<el-button class="btn btn2" type="primary" @click="submit">确认</el-button>
				</div>
			</el-dialog>
		</el-dialog>
		<el-dialog :title="title1" :visible.sync="showFlag" width="550px" :before-close="handleClose3">
			<el-form ref="editForm" label-position="left" :rules="rules" label-width="100px" :model="editForm" class="edit-form">
				<el-form-item label="专区名称：">
					<el-select v-model.trim="editForm.zone_name" filterable clearable placeholder="请选择专区" disabled="">
						<el-option v-for="(value, index) in zoneList" :key="index" :label="value.zoneName" :value="value.zoneName"></el-option>
					</el-select>
				</el-form-item>
				<div class="title">商品信息</div>
				<div class="goods-info">
					<img :src="editForm.picUrl" alt="" />
					<div class="right">
						<div class="goods-name">商品名称：{{ editForm.goodsName }}</div>
						<div class="goods-id">ID: {{ editForm.goods_id }}</div>
						<div class="goods-price"><span>¥</span>{{ editForm.originPrice }}</div>
					</div>
				</div>
				<el-row style="margin-top: 20px" :gutter="40">
					<el-col :span="12">
						<el-form-item label="寄售价格：" label-width="100px" prop="killPrice">
							<el-input v-model.trim.number="editForm.killPrice" :disabled="disable" placeholder="请输入寄售价格" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="现金积分：" label-width="100px" prop="killPrice">
							<el-input v-model.trim.number="editForm.killPrice" :disabled="disable" placeholder="请输入现金积分" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序：" label-width="100px" label-position="right" prop="sort">
							<el-input v-model.trim.number="editForm.sort" :disabled="disable" placeholder="请输入排序" clearable />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="btn-box">
				<el-button class="btn btn1" @click="handleClose3">{{ disable ? '退出' : '取消' }}</el-button>
				<el-button v-if="!disable" type="primary" class="btn btn2" @click="submitEdit">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getZoneList, getZoneGoodsList } from '@/api/mall/prefecture';
import { addKillGoods, editKillGoods, delKillGoods, getKillGoodsList, getKillGoodsDetails } from '@/api/mall/seckill';
export default {
	name: 'Index',
	components: {},
	data() {
		return {
			editForm: {},
			title1: '',
			showFlag: false,
			price: '',
			date: [],
			zoneId: '',
			selectShowFlag: false,
			loading: true,
			// 是否显示弹出层
			open: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				categoryId: null,
				date: [],
			},
			goodsList: [],
			// 表单参数
			form: {},
			total: 0,
			showAdd: false,
			// 表单校验
			rules: {
				sort: [
					{ required: true, message: '排序不能为空' },
					{ type: 'number', message: '排序必须为数字值' },
				],
				killPrice: [
					{ required: true, message: '秒杀价不能为空' },
					{ type: 'number', message: '秒杀价必须为数字值' },
				],
			},
			goodsDetail: '',
			detailDialogVisible: false,
			zoneList: [],
			goodsForm: {
				pageNum: 1,
				pageSize: 10,
				name: null,
			},
			selectList: [],
			addGoodsFlag: false,
			goodsTotal: 0,
			zoneName: '',
			goodsZoneList: [],
			selectListNow: [],
			disable: true,
		};
	},

	created() {
		this.getList();
		this.getZoneList();
	},
	methods: {
		goConsignment() {
			this.$router.push({
				path: '/marketing/consignment',
			});
		},
		handleClose3() {
			this.showFlag = false;
			this.editForm = {};
			this.$refs['editForm'].resetFields();
		},
		batchEditTime() {
			console.log(this.date);
			for (let i = 0; i < this.selectListNow.length; i++) {
				this.$set(this.selectListNow[i], 'date', this.date);
			}
		},
		batchEditPrice() {
			for (let i = 0; i < this.selectListNow.length; i++) {
				this.$set(this.selectListNow[i], 'killPrice', this.price);
			}
		},
		goodsCommit() {
			console.log(this.selectListNow);
			for (let i = 0; i < this.selectListNow.length; i++) {
				if (!this.selectListNow[i].sort) {
					this.$message.error('请添加商品的排序');
					return;
				}

				delete this.selectListNow[i].tenantId;
				this.selectListNow[i].startTime = this.selectListNow[i].date[0];
				this.selectListNow[i].endTime = this.selectListNow[i].date[1];
				this.selectListNow[i].zoneId = this.zoneId;
			}
			addKillGoods(this.selectListNow).then((res) => {
				this.$message.success('新增秒杀商品成功!');
				this.showAdd = false;
				this.handleClose();
				this.getList();
			});
		},
		queryGoodsList() {
			this.goodsForm.pageNum = 1;
			this.getGoodsList();
		},
		selectShow() {
			this.addGoodsFlag = true;
			this.getGoodsList();
		},
		getGoodsList() {
			this.goodsForm.zoneId = this.zoneId;
			console.log(this.goodsForm.zoneId);
			getZoneGoodsList(this.goodsForm).then((response) => {
				console.log(this.goodsForm);
				this.goodsZoneList = response.data.records;
				this.goodsTotal = response.data.total;
				this.addGoodsFlag = true;
			});
		},
		submit() {
			this.selectListNow = this.selectList;
			this.addGoodsFlag = false;
		},
		selectGoodsChange(value) {
			this.selectList = value;
		},
		handleClose2() {
			this.goodsForm = {
				pageNum: 1,
				pageSize: 10,
				name: null,
			};
			this.selectList = [];
			this.addGoodsFlag = false;
		},
		getZoneList() {
			getZoneList({}).then((res) => {
				this.zoneList = res.data;
			});
		},

		handleClose() {
			if (this.$refs.selectTable) {
				this.$refs.selectTable.clearSelection();
			}
			this.showAdd = false;
			this.price = '';
			this.selectListNow = [];
			this.selectList = [];
			this.zoneId = '';
		},
		queryList() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		getList() {
			this.loading = true;
			let obj = JSON.parse(JSON.stringify(this.queryParams));
			if (obj.date) {
				obj.beginTime = obj.date[0];
				obj.endTime = obj.date[1];
			}
			delete obj.date;
			getKillGoodsList(obj).then((response) => {
				this.goodsList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		getKillGoodsDetails(id) {
			getKillGoodsDetails({ id }).then((res) => {
				this.editForm = res.data;
				this.editForm.date = res.data.killTime.split('~');
				console.log(this.editForm);
			});
		},
		handleUpdate(id) {
			this.getKillGoodsDetails(id);
			this.showFlag = true;
			this.disable = true;
			this.title1 = '详情';
		},
		submitEdit() {
			this.$refs['editForm'].validate((valid) => {
				if (valid) {
					if (this.editForm.date.length < 1) {
						this.$message.error('请选择秒杀时间');
						return;
					}
					let obj = {
						id: this.editForm.id,
						killPrice: this.editForm.killPrice,
						sort: this.editForm.sort,
						endTime: this.editForm.date[1],
						beginTime: this.editForm.date[0],
					};
					editKillGoods(obj).then((res) => {
						this.$message.success('编辑商品成功!');
						this.getList();
						this.handleClose3();
					});
				}
			});
		},
		handleEdit(id) {
			this.getKillGoodsDetails(id);
			this.showFlag = true;
			this.disable = false;
			this.title1 = '编辑';
		},
		handleDel(id) {
			this.$confirm('是否删除该商品?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delKillGoods({
						id: [id],
					}).then(() => {
						this.$message.success('删除商品成功!');
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
				}
			});
		},
		handleAdd() {
			this.showAdd = true;
		},
	},
};
</script>
<style scoped lang="scss">
.btn-box {
	display: flex;
	justify-content: center;
	.btn2 {
		background: #1a2483;
		opacity: 1;
		border: none;
	}
	.btn {
		width: 236px !important;
		line-height: 60px;
		height: 60px;
		padding: 0;
		text-align: center;
	}
}
.edit-form {
	.goods-info {
		display: flex;
		border-radius: 8px;
		border: 1px dashed transparent;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
		width: 100%;
		height: 127px;
		box-sizing: border-box;
		padding: 14px 18px;
		.right {
			padding-left: 30px;
			font-size: 16px;
			overflow: hidden;
			flex: 1;
			.goods-name {
				color: #333333;
			}
			.goods-id {
				color: #808a97;
				margin-top: 15px;
			}
			.goods-price {
				color: #f14a46;
				font-weight: 900;
				margin-top: 15px;
				span {
					font-size: 10px;
				}
			}
		}
		img {
			display: block;
			width: 100px;
			height: 100px;
			border-radius: 8px;
		}
	}
	.title {
		text-align: left;
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		font-weight: bold;
	}
}
.bottom-btn-box {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 20px;
	> div {
		position: absolute;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		left: 80px;
		span {
			color: #f14a46;
		}
	}
	.btn {
		width: 236px;
		height: 60px;
		padding: 0;
		font-size: 18px;
	}
	.btn2 {
		background: #1a2483;
		border: none;
	}
}
.commit-btn {
	width: 494px;
	height: 60px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	border-radius: 4px;
	text-align: center;
	margin: 0px auto;
	border: 1px;
	color: #ffffff;
	font-size: 18px;
}
.pl-edit-btn {
	width: 75px;
	height: 35px;
	background: #6373ee;
	opacity: 1;
	font-size: 12px;
	padding: 10px 12px;
	text-align: center;
	border: none;
	margin-left: 10px;
	&:hover {
		background: #6373ee;
		opacity: 1;
	}
}
.select-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	border: none;
	&:hover {
		background: #1a2483;
		opacity: 1;
	}
}
.search-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	display: inline-block;
	cursor: pointer;
}
.add-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	cursor: pointer;
}
.table {
	margin-top: 20px;
	border: 1px solid #f7f7f7;
	opacity: 1;
	border-radius: 10px;
	.btn {
		height: 36px;
		border: none;
		border-radius: 4px;
		color: #ffffff;
	}
	.btn1 {
		background: #6373ee;
	}
	.btn2 {
		background: #1d2eb8;
	}
	.btn3 {
		background: #1a2483;
	}
}
</style>
